<template>
  <div class="main-list" id="root" :class="searchOnTop ? 'showSearch' : ''">
    <div class="search">
      <div class="search-icon"></div>
      <input ref="myinput" v-model="keyword" type="text" @focus="onFocus" @blur="onBlur" placeholder="搜索部门、姓名" />
      <div class="close-icon" v-show="keyword" @click="clearSearch"></div>
    </div>
    <div class="searchbtn" @click="showDanwei">全部单位</div>
    <template v-for="(value, key) in nowPd" :key="key">
      <div class="item">
        <div class="subtit">
          {{ key }}
        </div>
        <template v-for="(dep, idx) in value" :key="idx">
          <div class="pd">
            <div class="item">
              <div v-if="dep.deptName" class="tit" @click="toggleIndex(idx)">
                <div>{{ dep.deptName }}</div>
                <div class="icon1" :class="showArr.includes(idx) || keyword ? '' : 'icon2'"></div>
              </div>
              <div style="padding-bottom: 16px" v-if="showArr.includes(idx) || keyword || !dep.deptName">
                <template
                  v-for="(item, index) in dep.fileResouseDOs"
                  :key="index"
                >
                  <div class="audio dbc" v-if="isList(item.id, scene) == 1">
                    <marquee-text class="name" :repeat="1" :key="item.id" :paused="item.resourceName.length < 9"> {{ item.resourceName }}</marquee-text>
                    <div class="long">{{ item.resourceTime }}</div>
                    <div class="btn" :data-id="item.id">播放中</div>
                  </div>
                  <div class="audio dba" v-else-if="isList(item.id, scene) == 2">
                    <marquee-text class="name" :repeat="1" :key="item.id" :paused="item.resourceName.length < 9"> {{ item.resourceName }}</marquee-text>
                    <div class="long">{{ item.resourceTime }}</div>
                    <div class="btn" :data-id="item.id">己点播</div>
                  </div>
                  <div class="audio db" v-else>
                    <marquee-text class="name" :repeat="1" :key="item.id" :paused="item.resourceName.length < 9"> {{ item.resourceName }}</marquee-text>
                    <div class="long">{{ item.resourceTime }}</div>
                    <div class="btn" :data-id="item.id" @click="dianBo(item.id,key,idx)">
                      点播
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div style="height: 16px"></div>
        </template>
      </div>
    </template>
    <Zhuanji v-if="scene == 49" />
  </div>
  <Danwei
    v-if="isShowDanwei"
    @emitDanwei="emitDanwei"
    @emitGetSearch="emitGetSearch"
  />
  <Msg v-if="0" />
  <Danwei v-if="0" />
  <PlayList v-if="showPlayList" />
  <Tips :message="message" v-if="message" />
  <AddAudio v-if="0" />
</template>

<script>
import { ref, watch, reactive, computed, onUnmounted,onMounted } from "vue";
import Zhuanji from "./../components/Zhuanji.vue";
import Msg from "./../components/Msg.vue";
import PlayList from "./../components/PlayList.vue";
import Tips from "./../components/Tips.vue";
import MarqueeText from 'vue-marquee-text-component'
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";
import Danwei from "./../components/Danwei.vue";
export default {
  name: "audioList",
  components: {
    Zhuanji,
    Msg,
    Danwei,
    PlayList,
    Tips,
    MarqueeText,
  },
  setup(props) {
    const route = useRoute();
    const router = useRouter();
    const message = ref("");
    const myinput = ref();
    const showArr = ref([]);
    const searchOnTop = ref(false);
    const store = reactive(useStore());
    const state = store.state;
    const scene = route.query.scene ? route.query.scene : state.scene;
    const { playList } = state;
    const isShowDanwei = ref(false);
    const pingDaoId = ref(route.query.id);
    const keyword = ref("");
    const intervalId = ref();
    if(route.query.scene) sessionStorage.setItem('scene',route.query.scene)
      store.dispatch('getResources')
    if (scene == 48) {
      store.dispatch('getPlayList')
      intervalId.value  = setInterval(function(){ store.dispatch('getPlayList') }, 1000);
    }else{
      store.dispatch('getPlayList')
    }
    onUnmounted(() => {
         intervalId.value && clearInterval(intervalId.value);
    })
    const nowPd = computed(() => {
      const rs = {};
      const audioList = sessionStorage.getItem('audioList') ? JSON.parse(sessionStorage.getItem('audioList')) : state.audioList;
      if (keyword.value) {
        let arr = [];
        audioList[pingDaoId.value].forEach((g) => {
          if (g.deptName.includes(keyword.value)) {
            arr.push(g);
          } else {
            let arr2 = g.fileResouseDOs.filter(h => {
              return h.resourceName.includes(keyword.value);
            })
            if (arr2.length > 0) {
              arr.push({
                companyName: g.companyName,
                deptName: g.deptName,
                fileResouseDOs: arr2,
              });
            }
          }
        })
        rs[pingDaoId.value] = arr;
      } else {
        rs[pingDaoId.value] = audioList[pingDaoId.value];
      }
      console.log('rs',rs)
      return rs;
    });
    const dianBo = (e,key,idx) => {
      if (scene == 48 ) {
        axios
          .post("/mguo/audio/dianbo", { resourceId: e, userId: state.userId })
          .then((response) => {
            if (response.data.msg && response.data.msg == "success") {
              message.value = "🎉 点播成功";
            } else {
              message.value = "💔 点播失败," + response.data.msg;
            }
            const timer = setTimeout(() => {
              message.value = null;
              clearInterval(timer);
            }, 2000);
          });
      } else {
        //网络点播
        const audioList = sessionStorage.getItem('audioList') ? JSON.parse(sessionStorage.getItem('audioList')) : state.audioList
        const allWebList = audioList[key][idx].fileResouseDOs  // 当前频道所有音频
        const currentRecord = allWebList.filter(item=>item.id == e) // 当前选中播放音频
        // let webList = state.webList
        // const newWebList = webList.length > 0 ? [...webList,...currentRecord] :  [...currentRecord] // 网络播放列表
        const playList = state.playList
        // console.log('audioList',currentRecord,key,idx)
        playList[49]={data: { current: currentRecord[0] , list:currentRecord} }
        // state.webList = newWebList
        store.commit("setPlayList", playList);
        store.commit("setPlayer", { isPlaying: true, playIngNo: 0});
        const timer = setTimeout(() => {
          message.value = null;
          clearInterval(timer);
        }, 2000);
      }
    };

    const showPlayList = ref(false);
    const showPlayListFun = (e) => {
      showPlayList.value = true;
    };
    //检测是否点播
    const isList = (arr, val) => {
      const current = state.playList[scene].data.current;
      if (current && current.id == arr) {
        return 1;
      }
      const plist = state.playList[scene].data.list;
      for (let i = 0; i < plist.length; i++) {
        if (plist[i].id == arr) {
          return 2;
        }
      }
      return 3;
    };
    //如果没播放现在开始
    if (store.state.isPlaying === false && playList.length > 0) {
      store.commit("setPlayer", { isPlaying: true, playIngNo: 0 });
    }

    watch(store, (currentValue, prevValue) => {
    });
    const toSearch = () => {
      router.push({ name: "search" });
    };
    const onFocus = () => {
      searchOnTop.value = true;
    };
    const onBlur = () => {
      searchOnTop.value = false;
    };
    const clearSearch = () => {
      keyword.value = "";
    };
    const toggleIndex = (id) => {
      let findIndex = showArr.value.findIndex((g) => g === id);
      console.log('first',findIndex, showArr.value)
      if (findIndex ===  -1) {
        showArr.value = [id, ...showArr.value];
      } else {
        showArr.value.splice(findIndex, 1);
        showArr.value = [...showArr.value];
      }
      console.log('showArr.value',showArr.value)
    };
    //显示单位
    const showDanwei = () => {
      isShowDanwei.value = !isShowDanwei.value;
    };
    //子组件单位操作
    const emitDanwei = (e) => {
      isShowDanwei.value = e;
    };
    //子组件提交搜索
    const emitGetSearch = (e) => {
      pingDaoId.value = e;
      keyword.value = "";
      // startSearch();
      isShowDanwei.value = false;
    };

    onMounted(() => {
      const search = route.query.search;
      if (search) {
        myinput.value.focus();
        searchOnTop.value = true;
      }
    })
    return {
      scene,
      nowPd,
      showPlayList,
      dianBo,
      isList,
      message,
      toSearch,
      showPlayListFun,
      showDanwei,
      isShowDanwei,
      emitDanwei,
      emitGetSearch,
      onFocus,
      onBlur,
      myinput,
      searchOnTop,
      keyword,
      clearSearch,
      toggleIndex,
      showArr,
    };
  },
};
</script>
<style>
.main-list {
  width: 100%;
  height: 100%;
}
.main-list.showSearch{
  background: #d81519;
  transform: translateY(-170px);
  height: calc(100% + 170px);
}
.main-list .item {
  padding-top: 250px;
}

.main-list .item .subtit {
  background: url(../images/tit.png) no-repeat;
  background-position: 20px 0;
  color: white;
  padding-left: 45px;
  font-size: 12px;
  margin-bottom: 20px;
}
.main-list .item .pd {
  font-size: 12px;
  min-height: 40px;
  width: 95%;
  color: white;
  margin: 0 auto;
}
.main-list .item .pd .item {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0 8px;
}
.main-list .item .pd .item .audio {
  display: flex;
  height: 48px;
  background: white;
  border-radius: 10px;
  margin-top: 20px;
  color: black;
  line-height: 48px;
  padding-left: 20px;
}
.main-list .item .pd .item .dbc {
  display: flex;
  height: 64px;
  background: white;
  border-radius: 10px;
  margin-top: 20px;
  color: black;
  line-height: 64px;
  box-shadow: 0 0 15px yellow;
  width: 100%;
  margin-left: -8px;
}

.main-list .item .pd .item .audio .name {
  flex-basis: 40%;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
  margin-right: 14px;
}
.main-list .item .pd .item .audio .long {
  flex-basis: 30%;
  color: #ad7e7e;
}
.main-list .item .pd .item .audio .btn {
  flex-basis: 30%;
  font-weight: bold;
  font-size: 14px;
}
.main-list .item .pd .item .dba .btn {
  background: url(../images/db0.png) no-repeat right;
  text-align: right;
  box-sizing: border-box;
  padding-right: 18px;
}
.main-list .item .pd .item .db .btn {
  background: url(../images/db.png) no-repeat right;
  color: white;
  text-align: right;
  box-sizing: border-box;
  padding-right: 25px;
}
.main-list .item .pd .item .dbc .btn {
  background: url(../images/db2.png) no-repeat right;
  color: white;
  text-align: right;
  box-sizing: border-box;
  padding-right: 15px;
}
.main-list .item .pd .item .tit {
  height: 40px;

  text-align: left;
  line-height: 40px;
  padding-left: 10px;
  position: relative;
  /* margin-bottom: 20px; */
}
.main-list .item .pd .item .tit .icon {
  height: 40px;
  width: 40px;
  background: url(../images/jiantou.png) no-repeat 12px 12px;
  position: absolute;
  right: 0;
  top: 0;
}
.main-list .item .pd .item .tit .icon1 {
  height: 40px;
  width: 40px;
  background: url(../images/jiantou.png) no-repeat 12px 12px;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(180deg);
}
.main-list .item .pd .item .tit .icon2 {
  transform: rotate(0) !important;
}

.main-list .search {
  position: absolute;
  top: 194px;
  height: 36px;
  background: #b71315;
  width: 234px;
  left: 50%;
  margin-left: -180px;
  border-radius: 36px;
  overflow: hidden;
  text-align: left;
}
.main-list .searchbtn {
  position: absolute;
  top: 194px;
  height: 36px;
  background: #f04a2c url(../images/ld.png) no-repeat 10px 10px;
  line-height: 36px;
  width: 110px;
  right: 10px;
  margin-left: -180px;
  border-radius: 36px;
  overflow: hidden;
  text-align: center;
  color: white;
  font-size: 12px;
}
.main-list .search input::placeholder {
  color: #cccccc;
}
.main-list .search input {
  position: absolute;
  border: 1px solid #b71315;
  background: #b71315;
  height: 34px;
  width: 200px;
  outline: none;
  color: white;
  font-size: 14px;
  left: 30px;
}

.main-list .search .search-icon {
  background: url(../images/icon-search.png) no-repeat;
  height: 18px;
  width: 22px;
  position: absolute;
  left: 12px;
  top: 11px;
}
.main-list .search .close-icon {
  background: url(../images/icon-close.png) no-repeat;
  background-size: 100% 100%;
  height: 16px;
  width: 16px;
  position: absolute;
  right: 12px;
  top: 10px;
}

.main-s .search input::placeholder {
  color: #cccccc;
}
</style>
